<template>
	<view>
		<u-navbar back-text="返回" title="售后详情"></u-navbar>
		<u-toast ref="uToast" />
		<u-modal v-model="refMesShow" @confirm="refund" show-cancel-button=true content="取消售后将自动确认收货,您还要继续吗?"></u-modal>
		
		<!--步骤条区域-->
		<view class="bg-white padding solid-top" v-if="basics != 4">
			<!--步骤条-->
			<view class="cu-steps" >
				<block v-if="afterOrderData.type==12" v-for="(item,index) in refundList" :key="index">
					<view class="cu-item" :class="index>basics?'':'select'">
						<view class="icon-view" v-if="index>basics">
							<text class="text-red" :class="'cuIcon-' + item.cuIcon"></text>
						</view>
						<view class="bg-red icon-view" v-else>
							<text :class="'cuIcon-' + item.cuIcon"></text>
						</view>
						<view class="text-sm text-black" v-if="index>basics">{{item.name}}</view>
						<view class="text-sm text-black" v-else>{{item.name_s}}</view>
					</view>
				</block>
				<block v-if="afterOrderData.type==11" v-for="(item,index) in sendList" :key="index">
					<view class="cu-item" :class="index>basics?'':'select'">
						<view class="icon-view" v-if="index>basics">
							<text class="text-red" :class="'cuIcon-' + item.cuIcon"></text>
						</view>
						<view class="bg-red icon-view" v-else>
							<text :class="'cuIcon-' + item.cuIcon"></text>
						</view>
						<view class="text-sm text-black" v-if="index>basics">{{item.name}}</view>
						<view class="text-sm text-black" v-else>{{item.name_s}}</view>
					</view>
				</block>
			</view>
			
			<!--提示-->
			<view class="text-sm text-center margin-top" v-if="afterOrderData.status == 0">
				<view class="text-black">商家<text class="text-red">拒绝</text>了您的申请
				,您可以重新提交或申请客服介入</view>
	
			</view>
			<view class="text-sm text-center margin-top" v-if="afterOrderData.status == 2">
				<view class="text-black">商家同意了您的退货请求</view>
				<view class="text-black">
					<text class="text-red">72</text>
					<text>小时内未寄回，售后将自动完成,您的订单也会确认收货。</text>
				</view>
			</view>
			<view class="text-sm text-center margin-top" v-if="basics == 1">
				<view class="text-black">寄回成功,待卖家收货.</view>
			</view>
		</view>
		
		<!--状态图标-->
		<view class="bg-white padding solid-top text-center zaiui-status-img-view" v-if="basics == 4 && !cancel">
			<view class="are-img-view" @tap="cancel = true">
				<image class="are-img" src="/static/zaiui/img/are.png" mode="widthFix"/>
			</view>
			<view class="text-sm text-black">售后已完成,如有疑问,请联系客服</view>
		</view>
		
		<view class="bg-white zaiui-card-box" v-if="afterOrderData.status!=1">
			<view class="zaiui-card-view zaiui-address-view">
				<view class="text-lg text-bold text-black">商家备注</view>
				<view class="solid-line"></view>
				<text>
				{{afterOrderData.shopRemark}}
				</text>					
				
			</view>
		</view>
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-address-view">
				<view class="text-lg text-bold text-black">用户备注</view>
				<view class="solid-line"></view>
				<text>
				{{afterOrderData.remark}}
				</text>					
				
			</view>
		</view>
		
		
		<!--物流信息-->
		<view class="bg-white zaiui-card-box"  v-if="afterOrderData.status ==2||afterOrderData.status ==3">
			<view class="zaiui-card-view zaiui-address-view">
				<view class="text-lg text-bold text-black">收货地址</view>
				<view class="solid-line"></view>
				<view class="cu-list menu-avatar" style="overflow: visible;">
					
						
						<text>{{afterOrderData.address}}</text>	
						<view class="text-gray text-sm flex" style="margin-top: 20rpx;">
							<view class="text-cut">收货人:{{afterOrderData.consignee}}&nbsp&nbsp&nbsp&nbsp{{afterOrderData.consigneePhone}}</view>
						</view>
						
				
				</view>
				
			</view>
		</view>
		<u-popup  v-model="logBoxShow" mode="center"  closeable=true width="700rpx" height="300rpx"  border-radius="14">
			<view style="margin-top: 60rpx;width: 90%;margin-left: 5%;">
				<u-form>
				<u-form-item label="运单号" labelWidth="120" prop="name">
					<u-input :border="border" placeholder="请输入" v-model="afterOrderData.logistics" type="text"></u-input>
				</u-form-item>
				</u-form>
				<button @click="submitLog" class="cu-btn bg-red" style="margin-top: 40rpx;width: 50%;margin-left:25%;">确定</button>
			</view>
			
		</u-popup>
		<view class="bg-white zaiui-card-box" v-if="afterOrderData.status==2"  @click="logBoxShow=true">
			<view class="zaiui-card-view zaiui-price-view">
					
				<view class="text-center text-black">
					填写运单号
				</view>
				<view class="solid-line"></view>
				<view class="text-center text-black">
					
				</view>
								
			</view>
		</view>
		
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="afterOrderData.status!==10">
			<view class="safe-bottom">
				
				<button v-if="afterOrderData.status!=10" class="cu-btn bg-grey" style="margin-left: 30rpx;" @click="afterCancel">取消售后</button>
				<button v-if="afterOrderData.status!=10" class="cu-btn bg-red" @click="toAfterSaleType" style="margin-left: 30rpx;">修改申请</button>
			</view>
		
		</view>
		<!--订单信息-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-order-view">
				<view class="text-lg text-bold text-black">售后单信息</view>
				<view class="solid-line"></view>
				<view class="text-black title-view">
					<view class="title">退款方式</view>
					<view class="text-right">
						<text class="margin-right-xs">
						{{afterOrderData.type===11?'退货退款':afterOrderData.type===12?'仅退款':''}}</text>
					</view>
				</view>
				<view class="text-black title-view">
					<view class="title">退款原因</view>
					<view class="text-right">
						<text class="margin-right-xs">{{reasonMap.get(afterOrderData.reason)}}</text>
					</view>
				</view>
				<view class="text-black title-view" >
					<view class="title">退款金额</view>
					<view class="text-right">
						<text class="margin-right-xs">{{afterOrderData.amount}}</text>
					</view>
				</view>
				<view class="text-black title-view" v-if="afterOrderData.status>2">
					<view class="title">运单号</view>
					<view class="text-right">
						<text class="margin-right-xs">{{afterOrderData.logistics}}</text>
						<button class="cu-btn sm line-black">复制</button>
					</view>
				</view>
				<view class="text-black title-view">
					<view class="title">售后编号</view>
					<view class="text-right">
						<text class="margin-right-xs">{{afterOrderData.id}}</text>
						<button class="cu-btn sm line-black">复制</button>
					</view>
				</view>
				<view  class="text-black title-view">
					<view class="title">订单编号</view>
					<view class="text-right">
						<text class="margin-right-xs">{{afterOrderData.orderId}}</text>
						<button class="cu-btn sm line-black">复制</button>
					</view>
				</view>
				
				<view class="text-black title-view">
					<view class="title">创建时间</view>
					<view class="text-right">
						<text>{{afterOrderData.createTime}}</text>
					</view>
				</view>
				<view class="text-black title-view" v-if="afterOrderData.status!=1">
					<view class="title">处理时间</view>
					<view class="text-right">
						<text>{{afterOrderData.disposeTime}}</text>
					</view>
				</view>
				
				<view class="text-black title-view" v-if="afterOrderData.status==10">
					<view class="title">完成时间</view>
					<view class="text-right">
						<text>{{afterOrderData.finishTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<!--商品金额-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-price-view">
				
				
				<view class="solid-line"></view>		
				<view class="text-center text-black">
					<button class="cu-btn bg-cyan" >申请客服介入</button>
					</view>
				<view class="solid-line"></view>
				<view class="text-center text-black">
					
				</view>
								
			</view>
		</view>
		<view class="bg-white zaiui-card-hight-box"/>
		<view class="cu-bar bg-white justify-end">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logBoxShow:false,
				afterOrderData:{},
				recMesShow:false,
				refMesShow:false,
			
				sendList: [
					{cuIcon: 'cartfill',name: '待商家处理', name_s: '已回复'},
					{cuIcon: 'deliver_fill',name: '待寄回', name_s: '已寄回'},
					{cuIcon: 'presentfill',name: '等待退款', name_s: '已退款'},
					{cuIcon: 'formfill',name: '处理中', name_s: '已完成'}
				], 
				refundList: [
					{cuIcon: 'cartfill',name: '待商家处理', name_s: '已回复'},
					{cuIcon: 'presentfill',name: '等待退款', name_s: '已退款'},
					{cuIcon: 'formfill',name: '处理中', name_s: '已完成'}
				], 
				reasonMap:new Map([
					[1, '多拍/错拍/不想要']
					,[0,'其他']
					,[4,'服务态度不好']
					,[3,'与描述不符']
					,[2,'质量差']])
			}
		},
		computed: {
			basics(){
				switch(this.afterOrderData.status){
					case 0:return 0;break;
					case 1:return -1;break;
					case 2:return 0;break;
					case 3:return 1;break;
					case 10:return 3;break;
					
				}
		
			}
		
		},
		onLoad(v) {
			this.afterOrderData.orderId=v.id
			
		},
		onShow() {
			this.loadData(this.afterOrderData.orderId)
		},
		onReady() {
			
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			afterCancel(){
				this.$u.api.afterCancel(this.afterOrderData.orderId).then(res=>{
					this.$refs.uToast.show({
						title: '取消成功',
						duration:500,
						type: 'success'
					})
					this.loadData(this.afterOrderData.orderId)
				})
			},
			submitLog(){
				this.$u.api.afterSend
				({id:this.afterOrderData.id,logistics:this.afterOrderData.logistics})
				.then(res=>{
					this.logBoxShow=false
					loadData(this.afterOrderData.id)
				})
			},
			loadData(id){
				this.$u.api.afterDetail({id:id}).then(res=>{
					this.afterOrderData=res
				})
			},
			toAfterSaleType(){
				uni.navigateTo({
					url: "/pages/afterSaleType/afterSaleType?afterId="+this.afterOrderData.id
					+"&amount="+this.afterOrderData.orderAmount+"&id="+this.afterOrderData.orderId
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "order-details.scss";
	.v-icon {
	      position: absolute;
	      width: 18rpx;
	      bottom: -6rpx;
	      left: 35rpx;
	  
	}
</style>
